<!DOCTYPE html>
<html lang='en'>
<html>

	<style>

		dialog[open] {
			font-family: verdana; 
			font-size: 28px; 
			color: white;
			background-color:rgb(200 0 0 / 0.90);
			border: solid rgb(200 0 0 / 0.90) 0px;
			border-radius: 12px;
		  }
	
	</style>

	<body>

		Example 03 - HTML page interacting with ESP32<br><br>
		<hr />
		Led: <input type='checkbox' disabled id='ledSwitch' onClick='turnLed (this.checked)'>
		<hr />

		<!-- error message -->
		<dialog id="errDialog"></dialog>

	</body>

	<script type='text/javascript'>

		// mechanism that makes REST calls and get their replies
		var httpClient = function () {
			this.request = function (url, method, callback) {
				var httpRequest = new XMLHttpRequest ();
				var httpRequestTimeout = null;
				
				httpRequest.onreadystatechange = function () {
					// console.log (httpRequest.readyState);
					if (httpRequest.readyState == 1) { // 1 = OPENED, start timing
						clearTimeout (httpRequestTimeout);
						httpRequestTimeout = setTimeout (function () { 
							// alert ('Server did not reply (in time).'); 
							errorMessage ('Server did not reply (in time).');
						}, 5000);
					}
					if (httpRequest.readyState == 4) { // 4 = DONE, call callback function with responseText
						clearTimeout (httpRequestTimeout);
						switch (httpRequest.status) {
							case 200: 	callback (httpRequest.responseText); // 200 = OK
										break;
							case 0:		break;
							default: 	// alert ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText); // some other reply status, like 404, 503, ...
										errorMessage ('Server reported error ' + httpRequest.status + ' ' + httpRequest.responseText);
										break;
						}
					}
				}
				httpRequest.open (method, url, true);
				httpRequest.send (null);
			}
		}


		// make a REST call and initialize/populate this page
		var client = new httpClient ();
		client.request ('/builtInLed', 'GET', function (json) {
			// json reply will be in a form: {"id":"ESP32_SRV","builtInLed":"on"}
			var obj = document.getElementById ('ledSwitch'); 
			obj.disabled = false; 
			obj.checked = (JSON.parse (json).builtInLed == 'on');
		});

		function turnLed (switchIsOn) { // send desired led state to ESP and refresh ledSwitch state
			client.request (switchIsOn ? '/builtInLed/on' : '/builtInLed/off' , 'PUT', function (json) {
				var obj = document.getElementById ('ledSwitch'); 
				obj.checked = (JSON.parse (json).builtInLed == 'on');                                                           
			});
		}

		// error message
		var errorMessageTimeout = null;
		function errorMessage (msg) {
			clearTimeout (errorMessageTimeout);
			document.getElementById ('errDialog').textContent = msg;
			document.getElementById ('errDialog').showModal ();
			errorMessageTimeout = setTimeout (function () {
				document.getElementById ('errDialog').close ();
			}, 3000);				
		}

	</script>

</html>
